<template>
    <view class="globe_back">
        <view class="box">
            <view class="fw_bold f_40">取消订单中，请谨慎操作</view>
            <!-- 商品 -->
            <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
                <view class="flex back_fff p_24 br_24 mt_24" v-for="(item, index) in list">
                    <view>
                        <checkbox value="cb" checked="true" class="chekbox" />
                    </view>
                    <view>
                        <image class="shopImg" :src="item.img" mode="widthFix"></image>
                    </view>
                    <view>
                        <view>
                            <view class="fw_bold f_32 listTitle">{{ item.title }}</view>
                            <view class="flex justify_content_between">
                                <view class="cl_999CA3 mr_24 f_28">{{ item.tip }}</view>
                                <view class="cl_999CA3 mr_24 f_28">x{{ item.number }}</view>
                            </view>
                            <view class="flex justify_content_end mt_40 f_28">￥{{ item.money }}</view>
                        </view>
                    </view>
                </view>
            </u-checkbox-group>
            <!-- 售后 -->
            <u-picker :show="reasonShow" :columns="reasons" @confirm="reasonConfirm" @cancel="reasonCancel"></u-picker>
            <u-picker :show="typeShow" :columns="types" @confirm="typeConfirm" @cancel="typeCancel"></u-picker>
            <view class="detailedBox back_fff p_32 mt_24 br_24">
                <view class="flex justify_content_between f_28 mt_40" @click="reasonShow = true">
                    <view style="width: 25%">售后原因</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" disabled placeholder="请选择售后原因" v-model="reason" />
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
                <view class="flex justify_content_between f_28 mt_40" @click="typeShow = true">
                    <view style="width: 25%">售后类型</view>
                    <view class="flex justify_content_between line_F7FAFF pb_16" style="width: 75%">
                        <input type="text" disabled placeholder="请选择售后类型" v-model="type" />
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>
            <!-- 描述凭证 -->
            <view class="store">
                <view class="f_28">描述凭证</view>
                <textarea class="f_28" name="" id="" cols="30" rows="10" placeholder="在这里输入您的描述"></textarea>
                <view>
                    <view class="flex flex-wrap">
                        <view v-if="images.length > 0" v-for="(item, i) in images">
                            <image class="storeImg" :src="item" mode="widthFix"></image>
                            <view class="imm_delete" @click="deletephotos(i)">
                                <image class="icon_ljt" :src="url + 'icon_sc.png'"></image>
                            </view>
                        </view>
                        <view class="img_add" style="display: inline-block" v-if="images.length < maxImagesNum" @click="instoreImages">
                            <image :src="url + 'updata-img.png'" mode="" style="width: 100%; height: 100%"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="couponBtn">确认取消</view>
        </view>
    </view>
</template>

<script>
import { common } from '@/common/serve.js';
export default {
    data() {
        return {
            url: '',
            reasonShow: false,
            typeShow: false,
            reasons: [['不想要了', '其他']],
            types: [['类型1', '类型2']],
            images: [],
            maxImagesNum: 6,
            reason: '',
            type: '',
            checkboxValue1: [],
            // 基本案列数据
            list: [
                {
                    name: '0',
                    img: '@/static/imgs/img.png',
                    title: '小牛电动 B0都市版新国标都市版新国标',
                    tip: '2021新款;220V',
                    number: '1',
                    money: '2000',
                    disabled: false
                },
                {
                    name: '1',
                    img: '@/static/imgs/img.png',
                    title: '小牛电动都市版新国标都市版新国标',
                    tip: '2021新款;220V',
                    number: '1',
                    money: '2000',
                    disabled: false
                },
                {
                    name: '2',
                    img: '@/static/imgs/img.png',
                    title: '小牛电动都市版新国标都市版新国标都市版新国标',
                    tip: '2021新款;220V',
                    number: '1',
                    money: '2000',
                    disabled: false
                }
            ]
        };
    },
    onShow() {
        this.url = this.baseUrl + this.imgPath;
    },
    methods: {
        checkboxChange(n) {
            console.log('change', n);
        },
        reasonConfirm(e) {
            console.log(e.value[0]);
            this.reason = e.value[0];
            this.reasonShow = false;
        },
        reasonCancel() {
            this.reasonShow = false;
        },
        typeConfirm(e) {
            this.type = e.value[0];
            this.typeShow = false;
        },
        typeCancel() {
            this.typeShow = false;
        },
        async instoreImages() {
            let images = this.images;
            let num = this.maxImagesNum - images.length; //图片长度

            const result = await common.chooseImage(num).catch((err) => console.log('chooseImageErrMsg:', err));
            const suceessList = (result || []).filter((item) => item.isSuccess === true);
            if (suceessList.length > 0) {
                suceessList.map((item) => {
                    images.push(item.path);
                });

                this.images = images;
            }
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    padding: 32rpx;
}
.chekbox {
}
.shopImg {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
}
.listTitle {
    width: 350rpx;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.store {
    padding: 24rpx;
    background: white;
    border-radius: 24rpx;
    margin-top: 30rpx;
}
.storeImg {
    width: 96rpx;
    height: 96rpx;
    border-radius: 16rpx;
    margin-right: 16rpx;
}
.storeTitle {
    color: #00091a;
    font-size: 32rpx;
    margin-bottom: 8rpx;
}
.img_add {
    width: 140rpx;
    height: 140rpx;
}
.imgbox {
    background: white;
    border-radius: 24rpx;
    padding: 32rpx 24rpx;
    color: #333a47;
    font-size: 28rpx;
    margin-top: 24rpx;
}
.couponBtn {
    margin: 24rpx auto;
    width: 686rpx;
    height: 100rpx;
    border-radius: 24rpx;
    background: #3377ff;
    text-align: center;
    line-height: 100rpx;
    color: white;
    font-size: 32rpx;
    font-weight: bold;
}
</style>
